<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import QRCode from 'qrcode'
import jsQR from 'jsqr'

const inputText = ref('')
const qrCodeDataUrl = ref('')
const qrCodeSize = ref(256)
const errorCorrectionLevel = ref('M')
const qrCodeColor = ref('#000000')
const backgroundColor = ref('#ffffff')
const margin = ref(4)
const errorMessage = ref('')
const isSuccess = ref(false)
const isGenerating = ref(false)
const isDecoding = ref(false)
const decodedText = ref('')
const uploadedImage = ref<File | null>(null)
const fileInput = ref<HTMLInputElement | null>(null)
const canvas = ref<HTMLCanvasElement | null>(null)

// 二维码生成选项
interface QRCodeOptions {
  errorCorrectionLevel: 'L' | 'M' | 'Q' | 'H'
  width: number
  margin: number
  color: {
    dark: string
    light: string
  }
}

// 二维码解码函数
function decodeQRCodeFromImageData(imageData: ImageData): string | null {
  const code = jsQR(imageData.data, imageData.width, imageData.height)
  return code ? code.data : null
}

// 生成二维码
async function generateQRCode() {
  if (!inputText.value.trim()) {
    errorMessage.value = '请输入要生成二维码的内容'
    isSuccess.value = false
    return
  }
  
  isGenerating.value = true
  errorMessage.value = ''
  
  try {
    const options: QRCodeOptions = {
      errorCorrectionLevel: errorCorrectionLevel.value as 'L' | 'M' | 'Q' | 'H',
      width: qrCodeSize.value,
      margin: margin.value,
      color: {
        dark: qrCodeColor.value,
        light: backgroundColor.value
      }
    }
    
    const dataUrl = await QRCode.toDataURL(inputText.value, options)
    qrCodeDataUrl.value = dataUrl
    
    errorMessage.value = '二维码生成成功 ✓'
    isSuccess.value = true
  } catch (error) {
    errorMessage.value = `二维码生成失败: ${(error as Error).message}`
    isSuccess.value = false
    qrCodeDataUrl.value = ''
  } finally {
    isGenerating.value = false
  }
}

// 上传图片
function handleFileUpload(event: Event) {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  
  if (!file) return
  
  if (!file.type.startsWith('image/')) {
    errorMessage.value = '请选择有效的图片文件'
    isSuccess.value = false
    return
  }
  
  uploadedImage.value = file
  decodeQRCodeFromFile(file)
}

// 从文件解码二维码
async function decodeQRCodeFromFile(file: File) {
  isDecoding.value = true
  errorMessage.value = ''
  decodedText.value = ''
  
  try {
    const imageData = await getImageDataFromFile(file)
    const decodedContent = decodeQRCodeFromImageData(imageData)
    
    if (decodedContent) {
      decodedText.value = decodedContent
      errorMessage.value = '二维码解码成功 ✓'
      isSuccess.value = true
    } else {
      throw new Error('未检测到有效的二维码')
    }
  } catch (error) {
    errorMessage.value = `二维码解码失败: ${(error as Error).message}`
    isSuccess.value = false
    decodedText.value = ''
  } finally {
    isDecoding.value = false
  }
}

// 从文件获取图像数据
function getImageDataFromFile(file: File): Promise<ImageData> {
  return new Promise((resolve, reject) => {
    const img = new Image()
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    
    if (!ctx) {
      reject(new Error('无法获取canvas上下文'))
      return
    }
    
    img.onload = () => {
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0)
      
      const imageData = ctx.getImageData(0, 0, img.width, img.height)
      resolve(imageData)
    }
    
    img.onerror = () => {
      reject(new Error('图片加载失败'))
    }
    
    img.src = URL.createObjectURL(file)
  })
}

// 下载二维码
function downloadQRCode() {
  if (!qrCodeDataUrl.value) {
    errorMessage.value = '请先生成二维码'
    isSuccess.value = false
    return
  }
  
  const link = document.createElement('a')
  link.download = `qrcode_${Date.now()}.png`
  link.href = qrCodeDataUrl.value
  link.click()
  
  errorMessage.value = '二维码已下载 ✓'
  isSuccess.value = true
}

// 复制到剪贴板
function copyToClipboard(text: string, type: string) {
  if (text) {
    navigator.clipboard.writeText(text).then(() => {
      errorMessage.value = `${type}已复制到剪贴板 ✓`
      isSuccess.value = true
    })
  }
}

// 复制二维码图片
async function copyQRCodeImage() {
  if (!qrCodeDataUrl.value) {
    errorMessage.value = '请先生成二维码'
    isSuccess.value = false
    return
  }
  
  try {
    const response = await fetch(qrCodeDataUrl.value)
    const blob = await response.blob()
    
    await navigator.clipboard.write([
      new ClipboardItem({ 'image/png': blob })
    ])
    
    errorMessage.value = '二维码图片已复制到剪贴板 ✓'
    isSuccess.value = true
  } catch (error) {
    errorMessage.value = `复制失败: ${(error as Error).message}`
    isSuccess.value = false
  }
}

// 清空所有
function clearAll() {
  inputText.value = ''
  qrCodeDataUrl.value = ''
  decodedText.value = ''
  uploadedImage.value = null
  errorMessage.value = ''
  isSuccess.value = false
  
  if (fileInput.value) {
    fileInput.value.value = ''
  }
}

// 加载示例
function loadSample() {
  inputText.value = 'https://example.com\n\n这是一个示例二维码，包含网址信息。\n\n生成时间: ' + new Date().toLocaleString()
  errorMessage.value = '示例内容已加载 ✓'
  isSuccess.value = true
}

// 加载联系人信息示例
function loadContactSample() {
  inputText.value = `BEGIN:VCARD
VERSION:3.0
FN:张三
ORG:示例公司
TITLE:软件工程师
TEL:+86-138-0000-0000
EMAIL:zhangsan@example.com
URL:https://example.com
END:VCARD`
  errorMessage.value = '联系人示例已加载 ✓'
  isSuccess.value = true
}

// 加载WiFi信息示例
function loadWifiSample() {
  inputText.value = 'WIFI:T:WPA;S:MyWiFiNetwork;P:MyPassword123;H:false;;'
  errorMessage.value = 'WiFi信息示例已加载 ✓'
  isSuccess.value = true
}

// 交换文本
function swapTexts() {
  const temp = inputText.value
  inputText.value = decodedText.value
  decodedText.value = temp
  
  errorMessage.value = '文本已交换 ✓'
  isSuccess.value = true
}

// 触发文件选择
function triggerFileSelect() {
  fileInput.value?.click()
}

// 预设尺寸
const presetSizes = [
  { label: '小 (128px)', value: 128 },
  { label: '中 (256px)', value: 256 },
  { label: '大 (512px)', value: 512 },
  { label: '超大 (1024px)', value: 1024 }
]

// 预设颜色
const presetColors = [
  { label: '经典黑白', dark: '#000000', light: '#ffffff' },
  { label: '蓝白', dark: '#0066cc', light: '#ffffff' },
  { label: '红白', dark: '#cc0000', light: '#ffffff' },
  { label: '绿白', dark: '#006600', light: '#ffffff' },
  { label: '紫白', dark: '#6600cc', light: '#ffffff' },
  { label: '深蓝浅蓝', dark: '#003366', light: '#e6f2ff' },
  { label: '深绿浅绿', dark: '#003300', light: '#e6ffe6' }
]

// 应用预设颜色
function applyColorPreset(preset: any) {
  qrCodeColor.value = preset.dark
  backgroundColor.value = preset.light
  errorMessage.value = `已应用${preset.label}配色 ✓`
  isSuccess.value = true
}
</script>

<template>
  <div class="qrcode-tool">
    <div class="generator-section">
      <h3>二维码生成</h3>
      
      <div class="config-section">
        <h4>生成配置</h4>
        <div class="config-grid">
          <div class="config-item">
            <label>尺寸:</label>
            <div class="size-controls">
              <select v-model="qrCodeSize" class="config-select">
                <option v-for="size in presetSizes" :key="size.value" :value="size.value">
                  {{ size.label }}
                </option>
              </select>
              <input 
                v-model.number="qrCodeSize" 
                type="range" 
                min="128" 
                max="1024" 
                step="32"
                class="size-slider"
              >
              <span class="size-display">{{ qrCodeSize }}px</span>
            </div>
          </div>
          
          <div class="config-item">
            <label>容错级别:</label>
            <select v-model="errorCorrectionLevel" class="config-select">
              <option value="L">L - 低 (~7%)</option>
              <option value="M">M - 中 (~15%)</option>
              <option value="Q">Q - 高 (~25%)</option>
              <option value="H">H - 最高 (~30%)</option>
            </select>
          </div>
          
          <div class="config-item">
            <label>边距:</label>
            <input 
              v-model.number="margin" 
              type="range" 
              min="0" 
              max="20" 
              class="config-slider"
            >
            <span>{{ margin }}px</span>
          </div>
        </div>
        
        <div class="color-config">
          <h4>颜色配置</h4>
          <div class="color-controls">
            <div class="color-item">
              <label>前景色:</label>
              <div class="color-input-group">
                <input v-model="qrCodeColor" type="color" class="color-input">
                <input v-model="qrCodeColor" type="text" class="color-text" placeholder="#000000">
              </div>
            </div>
            
            <div class="color-item">
              <label>背景色:</label>
              <div class="color-input-group">
                <input v-model="backgroundColor" type="color" class="color-input">
                <input v-model="backgroundColor" type="text" class="color-text" placeholder="#ffffff">
              </div>
            </div>
          </div>
          
          <div class="color-presets">
            <h5>预设配色:</h5>
            <div class="preset-buttons">
              <button 
                v-for="preset in presetColors" 
                :key="preset.label"
                class="btn btn-sm preset-btn"
                @click="applyColorPreset(preset)"
                :style="{ 
                  backgroundColor: preset.light, 
                  color: preset.dark,
                  border: `2px solid ${preset.dark}`
                }"
              >
                {{ preset.label }}
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="input-section">
        <h4>输入内容</h4>
        <div class="textarea-wrapper">
          <textarea 
            v-model="inputText" 
            class="text-input"
            placeholder="请输入要生成二维码的内容...\n\n支持的内容类型:\n• 网址 (http://example.com)\n• 文本信息\n• 联系人信息 (vCard格式)\n• WiFi信息\n• 电话号码\n• 邮箱地址\n• 地理位置等"
            spellcheck="false"
          ></textarea>
          <div class="input-stats">
            <span>字符数: {{ inputText.length }}</span>
            <span v-if="inputText.length > 1000" class="warning">⚠️ 内容过长可能影响扫描</span>
          </div>
        </div>
        
        <div class="sample-controls">
          <button class="btn btn-info" @click="loadSample">📝 网址示例</button>
          <button class="btn btn-info" @click="loadContactSample">👤 联系人示例</button>
          <button class="btn btn-info" @click="loadWifiSample">📶 WiFi示例</button>
        </div>
      </div>
      
      <div class="generate-controls">
        <button 
          class="btn btn-primary btn-large" 
          @click="generateQRCode"
          :disabled="isGenerating || !inputText.trim()"
        >
          {{ isGenerating ? '🔄 生成中...' : '🎯 生成二维码' }}
        </button>
      </div>
    </div>

    <div class="status" v-if="errorMessage" :class="{ 'error': !isSuccess, 'success': isSuccess }">
      {{ errorMessage }}
    </div>

    <div class="result-section" v-if="qrCodeDataUrl">
      <h3>生成结果</h3>
      <div class="qrcode-display">
        <div class="qrcode-container">
          <img :src="qrCodeDataUrl" :alt="inputText" class="qrcode-image">
          <div class="qrcode-info">
            <p><strong>尺寸:</strong> {{ qrCodeSize }}×{{ qrCodeSize }}px</p>
            <p><strong>容错级别:</strong> {{ errorCorrectionLevel }}</p>
            <p><strong>内容长度:</strong> {{ inputText.length }} 字符</p>
          </div>
        </div>
        
        <div class="result-controls">
          <button class="btn btn-success" @click="downloadQRCode">💾 下载图片</button>
          <button class="btn btn-success" @click="copyQRCodeImage">📋 复制图片</button>
          <button class="btn btn-secondary" @click="copyToClipboard(inputText, '二维码内容')">📄 复制内容</button>
        </div>
      </div>
    </div>

    <div class="decoder-section">
      <h3>二维码解码</h3>
      
      <div class="upload-section">
        <div class="upload-area" @click="triggerFileSelect">
          <input 
            ref="fileInput"
            type="file" 
            accept="image/*" 
            @change="handleFileUpload"
            style="display: none;"
          >
          <div class="upload-content">
            <div class="upload-icon">📷</div>
            <p>点击选择图片文件</p>
            <p class="upload-hint">支持 JPG、PNG、GIF 等格式</p>
          </div>
        </div>
        
        <div class="upload-info" v-if="uploadedImage">
          <p><strong>已选择:</strong> {{ uploadedImage.name }}</p>
          <p><strong>大小:</strong> {{ (uploadedImage.size / 1024).toFixed(1) }} KB</p>
          <p><strong>类型:</strong> {{ uploadedImage.type }}</p>
        </div>
      </div>
      
      <div class="decode-status" v-if="isDecoding">
        <div class="loading">🔄 解码中...</div>
      </div>
      
      <div class="decode-result" v-if="decodedText">
        <h4>解码结果</h4>
        <div class="textarea-wrapper">
          <textarea 
            v-model="decodedText" 
            class="text-output"
            readonly
            placeholder="解码结果将显示在这里..."
          ></textarea>
          <button 
            class="btn btn-success btn-sm copy-btn" 
            @click="copyToClipboard(decodedText, '解码结果')"
          >
            📋
          </button>
        </div>
        
        <div class="decode-controls">
          <button class="btn btn-info" @click="swapTexts">🔄 用作生成内容</button>
        </div>
      </div>
    </div>

    <div class="global-controls">
      <button class="btn btn-danger" @click="clearAll">🗑️ 清空所有</button>
    </div>

    <div class="help-section">
      <details>
        <summary>二维码工具说明</summary>
        <div class="help-content">
          <h4>生成功能:</h4>
          <ul>
            <li><strong>多种内容类型:</strong> 支持网址、文本、联系人、WiFi等</li>
            <li><strong>自定义样式:</strong> 可调整尺寸、颜色、边距等</li>
            <li><strong>容错级别:</strong> 支持L/M/Q/H四种容错级别</li>
            <li><strong>预设配色:</strong> 提供多种颜色搭配方案</li>
            <li><strong>实时预览:</strong> 即时生成和预览效果</li>
          </ul>
          <h4>解码功能:</h4>
          <ul>
            <li><strong>图片上传:</strong> 支持多种图片格式</li>
            <li><strong>内容提取:</strong> 自动识别并提取二维码内容</li>
            <li><strong>结果复制:</strong> 一键复制解码结果</li>
          </ul>
          <h4>常见二维码格式:</h4>
          <ul>
            <li><strong>网址:</strong> https://example.com</li>
            <li><strong>WiFi:</strong> WIFI:T:WPA;S:网络名;P:密码;H:false;;</li>
            <li><strong>电话:</strong> tel:+86-138-0000-0000</li>
            <li><strong>邮箱:</strong> mailto:user@example.com</li>
            <li><strong>短信:</strong> sms:138-0000-0000:消息内容</li>
            <li><strong>地理位置:</strong> geo:39.9042,116.4074</li>
          </ul>
          <h4>使用技巧:</h4>
          <ul>
            <li>内容越短，二维码越简单，扫描成功率越高</li>
            <li>选择合适的容错级别，平衡扫描性能和容错能力</li>
            <li>确保前景色和背景色有足够的对比度</li>
            <li>打印时建议使用较大尺寸以提高扫描成功率</li>
          </ul>
        </div>
      </details>
    </div>
  </div>
</template>

<style scoped>
.qrcode-tool {
  width: 100%;
}

.generator-section,
.decoder-section {
  margin-bottom: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.generator-section h3,
.decoder-section h3 {
  margin: 0 0 20px 0;
  color: #fff;
  font-size: 1.2em;
}

.config-section {
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.config-section h4,
.input-section h4,
.decode-result h4 {
  margin: 0 0 15px 0;
  color: #fff;
  font-size: 1.1em;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.config-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.config-item label {
  color: #ccc;
  font-size: 14px;
  font-weight: 500;
}

.size-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.config-select {
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  outline: none;
}

.config-select:focus {
  border-color: rgba(255, 255, 255, 0.4);
}

.size-slider,
.config-slider {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.size-display {
  color: #ccc;
  font-size: 12px;
  text-align: center;
}

.color-config {
  margin-top: 20px;
}

.color-config h4,
.color-config h5 {
  margin: 0 0 10px 0;
  color: #fff;
  font-size: 1em;
}

.color-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 15px;
}

.color-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-item label {
  color: #ccc;
  font-size: 14px;
  font-weight: 500;
}

.color-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.color-input {
  width: 50px;
  height: 35px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: none;
}

.color-text {
  flex: 1;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #fff;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  outline: none;
}

.color-text:focus {
  border-color: rgba(255, 255, 255, 0.4);
}

.preset-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.preset-btn {
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.preset-btn:hover {
  transform: scale(1.05);
}

.input-section {
  margin-bottom: 20px;
}

.textarea-wrapper {
  position: relative;
  margin-bottom: 10px;
}

.text-input,
.text-output {
  width: 100%;
  height: 150px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 12px;
  color: #fff;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}

.text-output {
  background: rgba(0, 0, 0, 0.4);
  height: 120px;
}

.text-input:focus,
.text-output:focus {
  border-color: rgba(255, 255, 255, 0.4);
}

.text-input::placeholder,
.text-output::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.input-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  font-size: 12px;
  color: #ccc;
}

.warning {
  color: #ffc107;
}

.sample-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.generate-controls {
  text-align: center;
  margin-top: 20px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  color: #fff;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}

.btn-large {
  padding: 12px 24px;
  font-size: 16px;
}

.btn-primary {
  background: #007bff;
}

.btn-primary:hover:not(:disabled) {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
}

.btn-secondary:hover:not(:disabled) {
  background: #545b62;
}

.btn-success {
  background: #28a745;
}

.btn-success:hover:not(:disabled) {
  background: #1e7e34;
}

.btn-info {
  background: #17a2b8;
}

.btn-info:hover:not(:disabled) {
  background: #117a8b;
}

.btn-warning {
  background: #ffc107;
  color: #212529;
}

.btn-warning:hover:not(:disabled) {
  background: #e0a800;
}

.btn-danger {
  background: #dc3545;
}

.btn-danger:hover:not(:disabled) {
  background: #c82333;
}

.status {
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-weight: 500;
}

.status.error {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.3);
}

.status.success {
  background: rgba(40, 167, 69, 0.1);
  color: #28a745;
  border: 1px solid rgba(40, 167, 69, 0.3);
}

.result-section {
  margin-bottom: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.result-section h3 {
  margin: 0 0 20px 0;
  color: #fff;
  font-size: 1.2em;
}

.qrcode-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.qrcode-image {
  max-width: 100%;
  height: auto;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: #fff;
}

.qrcode-info {
  text-align: center;
  color: #ccc;
  font-size: 14px;
}

.qrcode-info p {
  margin: 5px 0;
}

.result-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.upload-section {
  margin-bottom: 20px;
}

.upload-area {
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(0, 0, 0, 0.2);
}

.upload-area:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.3);
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.upload-icon {
  font-size: 48px;
}

.upload-area p {
  margin: 0;
  color: #fff;
  font-size: 16px;
}

.upload-hint {
  color: #ccc !important;
  font-size: 14px !important;
}

.upload-info {
  margin-top: 15px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  color: #ccc;
  font-size: 14px;
}

.upload-info p {
  margin: 5px 0;
}

.decode-status {
  text-align: center;
  padding: 20px;
}

.loading {
  color: #17a2b8;
  font-size: 16px;
  font-weight: 500;
}

.decode-result {
  margin-top: 20px;
}

.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
}

.decode-controls {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.global-controls {
  text-align: center;
  margin-bottom: 20px;
}

.help-section {
  margin-top: 20px;
}

.help-section details {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.help-section summary {
  padding: 12px 15px;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
  user-select: none;
}

.help-section summary:hover {
  background: rgba(255, 255, 255, 0.05);
}

.help-content {
  padding: 15px;
  color: #ccc;
}

.help-content h4 {
  margin: 0 0 10px 0;
  color: #fff;
  font-size: 1em;
}

.help-content ul {
  margin: 0 0 15px 0;
  padding-left: 20px;
}

.help-content li {
  margin-bottom: 5px;
  line-height: 1.4;
}

.help-content strong {
  color: #fff;
}

@media (max-width: 768px) {
  .config-grid {
    grid-template-columns: 1fr;
  }
  
  .color-controls {
    grid-template-columns: 1fr;
  }
  
  .preset-buttons {
    justify-content: center;
  }
  
  .sample-controls,
  .result-controls,
  .decode-controls {
    justify-content: center;
  }
  
  .qrcode-display {
    align-items: center;
  }
}
</style>